import { Drawer, Form, Input, Button, DrawerProps } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { useEffect } from 'react';
import { ErrorBox } from '../../components/lib';
import { useAddEpic } from '../../utils/epic';
import { useProjectIdInUrl } from '../kanban/util';
import { useEpicQueryKey } from './util';

export const EpicModal = (props: Pick<DrawerProps, "visible"> & { onClose: () => void }) => {
    const projectId = useProjectIdInUrl();
    const { mutateAsync, isLoading, error } = useAddEpic(useEpicQueryKey());
    const [form] = useForm();

    const onFinish = async (values) => {
        await mutateAsync({ projectId, ...values });
        props.onClose();
    }

    useEffect(()=>{
        form.resetFields();
    },[form, props.visible])

    return <Drawer
        forceRender={true}
        placement="right"
        closable={true}
        onClose={props.onClose}
        visible={props.visible}
        width={'100%'}
    >
        <h1>创建任务组</h1>
        <ErrorBox error={error} />
        <Form form={form} layout={'vertical'} style={{ width: '40rem' }} onFinish={onFinish}>
            <Form.Item label={'名称'} name={'name'} rules={[{ required: true, message: '请输入任务名称' }]}>
                <Input placeholder={'请输入名称'} />
            </Form.Item>
            <Form.Item style={{ textAlign: "right" }}>
                <Button loading={isLoading} type={'primary'} htmlType={'submit'}>提交</Button>
            </Form.Item>
        </Form>
    </Drawer>
}